<template>
  <div id="register">
    <div class="wrapper">
      <div class="title">
        <h2>注册</h2>
        <div @click="toLogin"
              style="cursor: pointer">已有账号>></div>
      </div>
      <div class="input-box">
        <div class="input-wrapper">
          <input @blur="verify('account')"
                 v-model="formData.loginStr"
                 placeholder="请输入用户名"></input>
        </div>

        <div class="input-wrapper">
          <input v-model="formData.phone"
                 @blur="verify('phone')"
                 placeholder="请输入手机号"></input>
        </div>
        <div class="input-wrapper">
          <input v-model="formData.code"
                  placeholder="请输入手机验证码"></input>
          <el-button class="verify" @click="getCode">获取验证码</el-button>
        </div>

        <div class="input-wrapper">
          <input v-model="formData.email"
                 @blur="verify('email')"
                 placeholder="请输入邮箱"></input>
        </div>
<!--        <div class="input-wrapper">-->
<!--          <input placeholder="请输入邮箱验证码"></input>-->
<!--          <el-button class="verify">获取验证码</el-button>-->
<!--        </div>-->

        <div class="input-wrapper">
          <input v-model="formData.password"
                 type="password"
                 @blur="verify('password')"
                 placeholder="请输入密码"></input>
        </div>
        <div class="input-wrapper">
          <input type="password"
                 v-model="confirmPass"
                 @blur="verify('confirmPass')"
                 placeholder="请确认密码"></input>
        </div>
      </div>

      <el-button round
                 @click="register"
                 class="submit">注册</el-button>
    </div>
  </div>
</template>
<script>
  import axios from "axios";

  export default {
    name: "Register",
    data(){
      return{
        type:'',
        formData:{
          loginStr : '',
          password : '',
          phone:'',
          code:'',
          email:''
        },
        confirmPass : ''
      }
    },
    methods:{
      toLogin(){
        this.$router.push('/login')
      },
      getCode(){
        if(this.formData.phone.trim().length === 0)
        {
          alert('请填写手机号！')
          return;
        }

        let params = {
          phone : this.formData.phone,
          user:'BUYER'
        }
        axios.post('https://haotry.top/api/verify/registerPhoneVerification',JSON.stringify(params),{
          headers:{
            'Content-Type':'application/json'
          }
        }).then(res => {
          let data = res.data
          console.log('绑定验证码')
          console.log(data)
          alert('验证码已发送，注意查收！')
          if(data.status === 200){
            console.log(data)
          }
          else{
            // alert("获取错误！")
          }
        })
      },
      verify(type)
      {
        //验证手机号
        if(type == 'phone')
        {
          let reg = new RegExp("^[1][3,4,5,7,8,9][0-9]{9}$")
          if (this.formData.phone.trim().length && !reg.test(this.formData.phone)) {
            alert("请填写正确的手机号码!");
            this.formData.phone = ''
            return;
          }
        }

        //验证邮箱
        if(type == 'email')
        {
          let reg = new RegExp("^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$")
          if (this.formData.email.trim().length && !reg.test(this.formData.email)) {
            alert("请填写正确的邮箱!");
            this.formData.email = ''
            return;
          }
        }

        let verifyLength = function(item)
        {
          if(item.length && (item.length < 6 || item.length > 20))
          {
            alert('长度必须是6-20个字符！')
            return false
          }
          return true
        }

        let verifyCom = function (item) {
          let reg = new RegExp("^\\w+$")
          if (item.trim().length && !reg.test(item)) {
            alert( '只能由数字、字母与下划线组成！')
            return false
          }
          return true
        }

        let verifyConcat = function (item) {
          let reg = /[A-Za-z].*[0-9]|[0-9].*[A-Za-z]/
          if (item.trim().length && !reg.test(item)) {
            alert( '必须包含数字与字母！')
            return false
          }
          return true
        }

        //验证用户名
        if(type == 'account')
        {
          let item = this.formData.loginStr
          if(!verifyLength(item)){
            this.formData.loginStr = ''
            return;
          }  //验证长度
          if(!verifyCom(item)) {
            this.formData.loginStr = ''
            return;
          }    //验证是否由数字、字母与下划线组成
          if(!verifyConcat(item)){
            this.formData.loginStr = ''
            return;
          }  //验证是否含有数字与字母

          //查看是否重名
          let params = {loginStr:this.formData.loginStr}
          console.log(params)
          // let params2 = new URLSearchParams()
          // params2.append('loginStr',this.formData.loginStr)
          axios.post('https://haotry.top/api/buyer/usernameIsUsed',JSON.stringify(params),{
            headers:{
              'Content-Type':'application/json'
            }
          }).then(res => {
            let data = res.data
            if(data.status === 500){
              console.log(data)
            }
            else{
              console.log(res)
              this.formData.loginStr = ''
              alert("用户名已被注册!请重新修改")
            }
          })
        }

        //验证密码
        if(type == 'password')
        {
          let item = this.formData.password
          if(!verifyLength(item))
          {
            this.formData.password = ''
            return;
          }  //验证长度
          if(!verifyCom(item)) {
            this.formData.password = ''
            return;
          }    //验证是否由数字、字母与下划线组成
          if(!verifyConcat(item)){
            this.formData.password = ''
            return;
          }  //验证是否含有数字与字母
        }

        if(type == 'confirmPass')
        {
          if(!(this.confirmPass == this.formData.password))
          {
            alert('两次密码不一致！请确认')
            this.confirmPass = ''
          }
        }
      },
      register(){
        axios.post('https://haotry.top/api/buyer/register',JSON.stringify(this.formData),{
          headers:{
            'Content-Type':'application/json'
          }
        }).then(res => {
          let data = res.data
          if(data.status === 200){
            this.$router.push('login')
          }
          else{
            console.log(res)
            alert(data.msg)
          }
        })
      }
    }
  }
</script>

<style scoped>
  #register{
    background-image: url("../assets/images/背景.jpg");
    background-size: 100% 100%;
    padding: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .wrapper{
    padding: 40px;
    width: 30%;
    height: 550px;
    border-radius: 10px;
    border: 2px solid #3a8ee6;
    background-color: #fff;
  }
  .title{
    display: flex;
    justify-content: space-between;
    font-size: 20px;
    align-items: center;
  }
  .input-box{
    /*height: 350px;*/
  }
  .input-wrapper{
    border-bottom: 1px solid #bbb6b6;
    height: 55px;
    width: 100%;
  }
  .input-wrapper:nth-child(3),.input-wrapper:nth-child(5){
    display: flex;
    align-items: center;
  }
  input{
    width: 100%;
    height: 30px;
    padding: 0;
    margin-top: 10px;
    border: none;
    font-size: 18px;
  }
  input:focus{
    border: none;
    outline: none;
  }
  .verify{
    width: 100px;
    height: 30px;
    padding: 0;
    background-color: #A9282E !important;
    color: #fff !important;
  }

  .submit{
    width: 100%;
    margin-top: 30px;
    height: 60px;
    font-size: 20px;
    background-color: #A9282E !important;
    color: #fff !important;
  }
  /deep/.submit:hover,.verify:hover{
    background-color: #A9282E;
    color: #fff;
  }
</style>